<template>
  <div class="chartLint__bottom">
    <el-row :gutter="12">
      <el-col :span="9">
        <el-card shadow="hover" style="margin-top: 15px;">
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      xData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], //横坐标
      myChartStyle: { float: "left", width: "100%", height: "300px" }, //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        //标题
        title: {
          text: '市场部报表',
          subtext: '2022年2月水电气收费记录',
          subtextStyle: { // 标题样式
            fontSize: 16,
          },
        },
        grid: {
          x: 40, // 左间距
          y: 80, // 上间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        xAxis: {
          data: this.xData,
          boundaryGap: false,
          axisLabel: {
            interval: 4
          }
        },
        yAxis: {
          // data:this.yData,
          splitLine: { //坐标轴虚线
            show: false,
          },
          //去除y轴线条
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: [2100, 3200, 4500, 3800, 3700, 4100, 1300, 2200, 3200, 4500, 3800, 3700, 4100, 1300, 2100, 2100, 3200, 4500, 3800, 3700, 4100, 3700, 4100, 1300, 2200, 3700, 4100, 1300, 4500, 3800],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0, [{//只要修改前四个参数就ok
                  offset: 0,
                  color: '#005BEA'
                }, //柱图渐变色
                {
                  offset: 1,
                  color: '#00C6FB'
                }
              ]
              ),
              barBorderRadius: 5,
              opacity: 0.5
            },
            barWidth: "80%", // 每个柱条的宽度就是类目宽度的 20%
          },

        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-top: 15px;
}

.chartLint__bottom {
  margin-top: -420px;
}
</style>

